<template>
	<scroll-view scroll-y :scroll-top="scrollTop" @scroll="_scroll" class="_page" :style="{ 'padding-bottom': searchVal && !notShowClaimOutLine ? 'calc(144rpx + env(safe-area-inset-bottom))' : '' }">
		<!-- #ifdef APP-PLUS||MP -->
		<uni-nav-bar dark fixed backgroundStyle="#FFFFFF" color="#121317" status-bar>
			<template slot="left">
				<uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
			</template>
			<template>
				<view class="nav_title">专业对照表</view>
			</template>
			<!-- #ifdef APP-PLUS||H5 -->
			<template slot="right">
				<view class="_right" @click.stop="_shareOpen">
					<text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
					<!-- <uni-icons type="redo-filled" color="#007AFF" size="20"></uni-icons> -->
					<text class="text">分享</text>
				</view>
			</template>
			<!-- #endif -->
		</uni-nav-bar>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<!-- <web-view src="http://192.168.88.128:8080/pages/applicationPage/comparisonTable/comparisonTable"></web-view> -->
		<!-- #endif -->
		<view class="_padding" style="background-color: #ffffff; padding-top: 20rpx">
			<mSearch :val="searchVal" :apiInfo="searchApiInfo" @check="(e) => (searchVal = e)"></mSearch>
		</view>

		<view class="default" v-if="!searchVal">
			<view class="img-box">
				<image src="https://bicpic.baikewang.com/images/1646994256440.png" mode="heightFix"></image>
				<view class="text">先在上方输入你的专科专业哦~</view>
			</view>
		</view>
		<!-- 截图区域 -->
		<view id="htmlCanvas" v-else>
			<!-- 可报考专业 -->
			<view class="major_box _padding">
				<view class="title_box">
					<text class="_title">{{ majorInfo.college }}</text>
					<text class="_tips">可报考专业</text>
				</view>
				<!-- 专业列表 -->
				<view class="major_uls" :class="{ hidden: !isOpenMajor }">
					<view
						class="major_li"
						:class="{ active: activeMajor.major_id == item.major_id }"
						v-for="(item, index) in majorInfo.university"
						:key="index"
						@click="getUniMajorInfo(item)"
					>
						{{ item.major_name }}
					</view>
				</view>

				<view class="weektoggle" @click="isOpenMajor = !isOpenMajor"></view>
			</view>
			<!-- 专业数据 -->
			<view class="major_info_box _padding">
				<view v-for="(item, index) in majorDetailArr" :key="index">
					<!-- 院校标题 -->
					<view class="school_info" v-if="item.university_school_name">
						<view class="title-box">
							<view class="_title">{{ item.university_school_name }}</view>
							<view
								class="title_right"
								@click.stop="popupBtnClick('查看考试报告', { major_id: activeMajor.major_id, university_school_id: item.university_school_id })"
							>
								查看考试报告
								<uni-icons type="forward" size="12"></uni-icons>
							</view>
						</view>
						<view class="_tips">公办院校 安徽</view>
					</view>
					<!-- 专业详情 -->
					<view class="major_details">
						<view class="_title">{{ activeMajor.major_name }}</view>
						<view class="_tips">{{ getCourseList(item.course_list) }}</view>
						<!-- 专业录取计划 -->
						<view class="plan_uls">
							<view class="plan_lis" v-for="(lis, lisIndex) in item.data_list" :key="lisIndex">
								<text class="topic">{{ item.new_year }}{{ lis.key }}</text>
								<text class="topic_info">{{ lis.val }}</text>
							</view>
							<view class="plan_lis" v-if="item.university_school_name">
								<text class="topic">近年省控线</text>
								<text class="topic_info topic_btn" @click="openControlLineInfo(item)">查看近年省控线</text>
							</view>
							<view class="plan_lis" v-else>
								<text class="topic">{{ item.new_year }}招生院校</text>
								<text class="topic_info topic_btn" @click="showPopup = true">查看院校详情</text>
							</view>
						</view>
						<view class="last_info" v-if="!item.university_school_name">
							共{{ item.all_school_count || 0 }}所（{{ item.plan_school_detail['公办'] || 0 }}所公办，{{ item.plan_school_detail['民办'] || 0 }}所民办，{{
								item.plan_school_detail['独立'] || 0
							}}所独立）
						</view>
						<!-- 数据注意信息 -->
						<view class="info_tips" v-if="item.remark">
							<uni-icons class="_flex" style="margin-right: 4rpx" type="info-filled" color="#E34D59" size="16"></uni-icons>
							<view class="single_row" :class="{ multiline: isOpenInfo[index] === 'open' }">
								{{ item.remark }}
							</view>
							<uni-icons
								@click="_toggle(item,index)"
								class="_flex"
								:class="[isOpenInfo[index]]"
								type="bottom"
								color="#E34D59"
								size="12"
							></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<!-- echarts -->
			<view style="padding-bottom: 60rpx; box-sizing: border-box; background-color: #ffffff">
				<view class="echarts_box" v-if="majorOptionInfo.chartsDataLine.categories.length">
					<qiun-data-charts
						type="area"
						ontouch
						canvas2d
						canvasId="TOwHumgtkGGsBkfSHwMcrTtLeygtmtUB"
						@complete="(e) => complete(e, 'major', '', majorOptionInfo.index)"
						tooltipFormat="controlLineDemo"
						:opts="majorOptionInfo.options"
						:chartData="majorOptionInfo.chartsDataLine"
					/>
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="bottom_btn" v-if="searchVal && majorDetailArr.length">
			<view class="gray_btn" v-if="!majorDetailArr[0].university_school_name" @click.stop="popupBtnClick('查看考试报告', { major_id: activeMajor.major_id })">
				查看考试报告
			</view>
			<view class="primary_btn" :class="{ _block: !notShowClaimOutLine && !!majorDetailArr[0].university_school_name }">领取考试大纲</view>
		</view>

		<!-- 分享示例 -->
		<uni-popup :is-mask-click="false" ref="share" type="share" safeArea backgroundColor="transparent">
			<uni-popup-share title="分享至" cancelText="取消分享" @select="select"></uni-popup-share>
		</uni-popup>

		<!-- 截图 -->
		<subfunction v-if="searchVal" :scrollTop="topHeight" @_top="_top" @share="_shareOpen"></subfunction>

		<!-- 招生院校 -->
		<mBottomPopup :showBtns="false" title="招生院校" @_close="showPopup = false" :showPopup="showPopup">
			<view class="school-box" v-if="majorSchoolInfo.university_list">
				<view class="school-title">
					<view class="title">{{ activeMajor.major_name }}</view>
					<view class="tips">
						{{ majorDetailArr[0].new_year }}招生院校共{{ majorSchoolInfo.all_school_count || 0 }}所（
						<text class="_blue">{{ majorSchoolInfo.plan_school_detail['公办'] || 0 }}</text>
						所公办，
						<text class="_yellow">{{ majorSchoolInfo.plan_school_detail['民办'] || 0 }}</text>
						所民办，
						<text class="_gray">{{ majorSchoolInfo.plan_school_detail['独立'] || 0 }}</text>
						所独立）
					</view>
				</view>
				<view class="school-table baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<uni-table width="" emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left" width="200">院校名称</uni-th>
							<uni-th align="center" width="120">就读地</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in majorSchoolInfo.university_list" :key="index">
							<uni-td align="left" width="200">
								<view class="school-info">
									<view class="nature public" v-if="item.school_type" :class="[ schoolType[ item.school_type ] ]">{{ item.school_type }}</view>
									<view class="table-bold">{{ item.school_name }}</view>
								</view>
							</uni-td>
							<uni-td align="center" width="120" class="table-bold">{{ item.school_address }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</mBottomPopup>
		<!-- 省控线popup -->
		<mBottomPopup
			:btns="[{ text: '查看考试报告', _color: true }]"
			:showBtns="true"
			@_close="showControlLine = false"
			@_btn="(e) => popupBtnClick(e, { major_id: activeMajor.major_id, university_school_id: showSchoolInfo.university_school_id })"
			title="近年省控线"
			:showPopup="showControlLine"
		>
			<view class="school-box">
				<view class="school-title">
					<view class="title">电气工程及其自动化</view>
				</view>
				<view class="school-table echarts_box echarts_box_bg baike_logo"
				:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
					<qiun-data-charts
						v-if="showControlLine"
						type="area"
						@complete="(e) => complete(e, 'controlLine', '', controlLineInfo.index)"
						tooltipFormat="controlLineDemo"
						:opts="controlLineInfo.options"
						:chartData="controlLineInfo.chartsDataLine"
					/>
				</view>
			</view>
		</mBottomPopup>
	</scroll-view>
</template>

<script>
import mSearch from '../components/m-search';
import subfunction from '../components/subfunction.vue';
import mBottomPopup from '@/components/m-bottom-popup/m-bottom-popup.vue';

export default {
	components: {
		mSearch,
		subfunction,
		mBottomPopup
	},
	watch: {
		searchVal(curr) {
			if(this.isLoading){
				this.getUniMajorInfo();
			}else{
				this.getInfo();
			}
		}
	},
	data() {
		return {
			isLoading: true,
			// #ifdef APP-PLUS||MP
			customNavHeight: 88,
			// #endif
			// #ifdef H5
			customNavHeight: 0,
			// #endif
			majorInfo: {},
			activeMajor: {},
			majorDetailArr: [],
			isOpenMajor: false,
			majorSchoolInfo: {},
			isOpenInfo: {},
			scrollTop: 0,
			topHeight: 0,
			// 页面中echarts图配置
			majorOptionInfo: {
				canvasId: this.randomString(32),
				index: 0, // 默认显示tooltips下标
				// 折线图数据
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [15, 30, 0, 10],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					height: 200,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						marginTop: 2,
						boundaryGap: 'center',
						title: '年份',
						titleFontSize: 12,
						titleFontColor: '#858688',
						titleOffsetY: -25,
						titleOffsetX: -20,
						calibration: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						showTitle: true,
						eachRange: 50,
						data: [
							{
								min: 0,
								axisLineColor: '#EFF0F0',
								position: 'left',
								title: '人数',
								fontSize: 10,
								fontColor: '#858688',
								// calibration: true,
								tofix: 0,
								titleFontSize: 12,
								titleFontColor: '#858688',
								titleOffsetY: -4,
								titleOffsetX: 12
							}
						]
					},
					extra: {
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: true,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF',
						}
					}
				},
				chartsDataLine: {
					categories: [],
					series: []
				}
			},
			// popup弹框中echarts图配置
			controlLineInfo: {
				index: 0,
				// 折线图数据
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [15, 30, 0, 10],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					noteMerge: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						marginTop: 2,
						boundaryGap: 'center',
						title: '年份',
						titleFontSize: 12,
						titleFontColor: '#858688',
						titleOffsetY: -25,
						titleOffsetX: -20,
						calibration: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						showTitle: true,
						eachRange: 50,
						data: [
							{
								min: 0,
								// max: 600,
								axisLineColor: '#EFF0F0',
								position: 'left',
								title: '人数',
								fontSize: 10,
								fontColor: '#858688',
								// calibration: true,
								tofix: 0,
								titleFontSize: 12,
								titleFontColor: '#858688',
								titleOffsetY: -6,
								titleOffsetX: 4
							}
						]
					},
					extra: {
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: true,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF'
						}
					}
				},
				chartsDataLine: {
					categories: [],
					series: [
						{
							name: '省控线',
							data: [],
							toolTips: []
						}
					]
				}
			},
			showPopup: false,
			showControlLine: false,
			searchVal: '',
			searchApiInfo: {
				api: 'getCollegeList',
				data: 'college'
			},
			showSchoolInfo: {} // 校考查看的内容
		};
	},
	methods: {
		_toggle(item,index){
			let that = this;
			let _text = that.toggleTips(index, that.isOpenInfo);
			let obj = {
				[index]: _text
			}
			that.isOpenInfo = Object.assign({},that.isOpenInfo,obj);
		},
		async openControlLineInfo(obj) {
			let that = this;
			that.showSchoolInfo = obj;
			await that.getPlanEcharts();
		},
		async getPlanEcharts() {
			let that = this;
			that.controlLineInfo.chartsDataLine.categories = [];
			that.controlLineInfo.chartsDataLine.series[0].data = [];
			let { code, data } = await that.$application_api.getPlanEcharts({
				major_id: that.activeMajor.major_id,
				university_school_id: that.showSchoolInfo.university_school_id
			});
			if (code != 0) return;
			let year = that.majorDetailArr[0].year;
			let _index = 0;
			if (data.echarts_data.year && data.echarts_data.year.length) {
				data.echarts_data.year.forEach((item, index) => {
					if (item === year) {
						_index = index;
					}
				});
			}
			that.controlLineInfo.index = _index;
			// X轴数据
			that.controlLineInfo.chartsDataLine.categories = data.echarts_data.year || [];
			// Y轴数据
			that.controlLineInfo.chartsDataLine.series[0].data = data.echarts_data.score || [];
			// 录取分数
			that.controlLineInfo.options.extra.tooltip.data = data.echarts_data.people || [];
			if (that.controlLineInfo.chartsDataLine.categories.length) {
				that.showControlLine = true;
			}
		},
		// 获取招生院校详情
		async getSymbolUniversitySchoolMajorDetail() {
			let that = this;
			let { code, data } = await that.$application_api.getSymbolUniversitySchoolMajorDetail({
				major_id: that.activeMajor.major_id
			});
			if (code != 0) return;
			that.majorSchoolInfo = data;
		},
		getCourseList(list) {
			if (!list.length) return '';
			let str = list.join('、');
			return str;
		},
		getInfo() {
			let that = this;
			if (!that.searchVal) {
				that.majorInfo = {};
				that.activeMajor = {};
				that.majorSchoolInfo = {};
				return;
			}
			// 获取本专对照表
			that.getUniversity();
		},
		async getUniversity() {
			let that = this;
			let { code, data } = await that.$application_api.getUniversity({
				college: that.searchVal
			});
			if (code != 0) return;
			that.majorInfo = data;
			that.activeMajor = data.university ? data.university[0] || {} : {};
			await that.getUniMajorInfo();
		},
		async getUniMajorInfo(obj) {
			let that = this;
			that.isLoading = false;
			that.activeMajor = obj || that.activeMajor;
			let { code, data } = await that.$application_api.universityMajorGetList({
				major_id: that.activeMajor.major_id
			});
			if (code != 0) return;
			that.majorDetailArr = data;
			that.majorDetailArr.forEach((item) => {
				item.new_year = String(item.year).substr(-2, 2) + '年';
			});
			// 获取招生院校
			if (data && !data[0].university_school_name) {
				that.getSymbolUniversitySchoolMajorDetail();
				that.getScoreEcharts();
			}
		},
		async getScoreEcharts() {
			let that = this;
			that.majorOptionInfo.chartsDataLine.categories = [];
			that.majorOptionInfo.chartsDataLine.series = [];
			let { code, data } = await that.$application_api.getScoreEcharts({
				major_id: that.activeMajor.major_id
			});
			if (code != 0) return;
			let year = that.majorDetailArr[0].year;
			let _index = 0;
			if (data.echarts_data.year && data.echarts_data.year.length) {
				data.echarts_data.year.forEach((item, index) => {
					if (item === year) {
						_index = index;
					}
				});
			}
			that.majorOptionInfo.index = _index;
			// X轴数据
			that.majorOptionInfo.chartsDataLine.categories = data.echarts_data.year || [];
			// Y轴数据
			that.majorOptionInfo.chartsDataLine.series = data.echarts_data.series || [];
			// 录取分数
			// that.majorOptionInfo.options.extra.tooltip.data = data.echarts_data.people || [];
		},
		_top() {
			this.scrollTop = this.topHeight;
			setTimeout(() => {
				this.scrollTop = 0;
			}, 100);
		},
		_scroll(e) {
			this.topHeight = e.detail.scrollTop;
		},
		_shareOpen() {
			this.$refs.share.open('bottom');
		}
	},
	onLoad(){
		let that = this;
		getApp().globalData.isLiscation = true;
		let searchDataInfo = uni.getStorageSync('searchDataInfo');
		that.activeMajor = searchDataInfo.checkInfo;
		that.searchVal = that.activeMajor.major_name;
	},
};
</script>

<style lang="scss" scoped>
$paddingLR: 40rpx;
._padding {
	padding: 0 40rpx;
	box-sizing: border-box;
}
._page {
	width: 100vw;
	min-height: 100vh;
	background-color: #f4f5f7;
	box-sizing: border-box;
}
.major_box {
	width: 100vw;
	border-radius: 0 0 30rpx 30rpx;
	background-color: #ffffff;
	padding-top: 68rpx;
	padding-bottom: 18rpx;

	.title_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 20rpx;
		._title {
			font-size: 40rpx;
			color: #121317;
			font-weight: bold;
		}
		._tips {
			font-size: 36rpx;
			color: #858688;
			margin-left: 14rpx;
			line-height: 46rpx;
		}
	}

	.major_uls {
		width: 100%;
		height: calc(68rpx * (12 / 2) + 24rpx * (12 / 2 - 1));
		overflow: hidden;
		transition: height 0.4s ease;
		&.hidden {
			max-height: calc(68rpx * 3 + 24rpx * 2);
			height: max-content;
		}
		.major_li {
			display: inline-flex;
			width: max-content;
			height: max-content;
			font-size: 28rpx;
			color: #121317;
			padding: 12rpx 28rpx;
			box-sizing: border-box;
			background-color: #fafafa;
			margin-right: 20rpx;
			margin-bottom: 24rpx;
			max-width: 100%;
			border-radius: 10rpx;
			&.active {
				background-color: #374049;
				color: #ffffff;
			}
		}
	}

	.weektoggle {
		width: 100%;
		height: 40rpx;
		position: relative;
		&::after {
			content: '';
			width: 54rpx;
			height: 8rpx;
			background-color: #e7e9ef;
			border-radius: 200rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 0);
			z-index: 1;
		}
	}
}
.major_info_box {
	margin-top: 32rpx;
	border-radius: 30rpx 30rpx 0 0;
	background-color: #ffffff;
	padding-top: 40rpx;
	padding-bottom: 40rpx;
	> view {
		margin-bottom: 64rpx;
	}
	.school_info {
		.title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title_right {
				flex-shrink: 0;
				font-size: 24rpx;
				color: #858688;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		._title {
			font-size: 40rpx;
			color: #121317;
			font-weight: bold;
			line-height: 44rpx;
		}
		._tips {
			font-size: 28rpx;
			color: #121317;
			line-height: 44rpx;
		}
		margin-bottom: 30rpx;
	}
	.major_details {
		width: 100%;
		padding: 28rpx 32rpx;
		box-sizing: border-box;
		background: #fafafa;
		border-radius: 30rpx;
		border: 4rpx solid rgba(241, 241, 241, 0.21);
		._title {
			font-size: 36rpx;
			color: #121317;
			font-weight: bold;
			line-height: 48rpx;
		}
		._tips {
			color: #121317;
			font-size: 24rpx;
			line-height: 40rpx;
		}
		.plan_uls {
			margin-top: 22rpx;
			// display: grid;
			// grid-gap: 6rpx;
			// grid-template-areas: '. .';
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			.plan_lis {
				flex-shrink: 0;
				min-width: calc((100% - 6rpx) / 2);
				margin-bottom: 12rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 24rpx;
				.topic {
					color: #858688;
					margin-right: 16rpx;
				}
				.topic_info {
					color: #121317;
					font-weight: bold;
				}
				.topic_btn {
					color: #007aff;
				}
			}
		}
		.last_info {
			color: #121317;
			font-weight: bold;
			font-size: 24rpx;
		}
	}
}

.school-box {
	width: 100vw;
	height: max-content;
	padding: 40rpx 39rpx;
	box-sizing: border-box;
	.school-title {
		width: 100%;
		.title {
			font-size: 35rpx;
			color: #121317;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.tips {
			font-size: 27rpx;
			color: #121317;
			text {
				font-weight: bold;
			}
			text._blue {
				color: $bic-color-public;
			}
			text._yellow {
				color: $bic-color-civilian;
			}
			text._gray {
				color: $bic-color-independent;
			}
		}
	}
}
</style>
